<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .gridView{
            width: 100px;
            height: 100px;
            border:1px solid #ccc;
            float: left;
            margin:20px;

        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <template id="control">
        <div style="border:1px solid #ccc;">
            
              <div style="margin: 5px;">
                <button @click="switchTab(false)">列表视图</button>
                <button  @click="switchTab(true)">网格试图</button>
                <input type="text">
              </div>
              
        </div>
    </template>
    <script>
        const control={
            template:'#control',
            methods:{
                switchTab(flag){
                    this.$emit("change",flag)
                }
            }
        }
        Vue.component('control', control)
    </script>


<!-- 列表视图 -->
<template id="viewList">
    <div >
        <div style="border:1px solid #ccc;padding-left: 5px;">
        <div style="border-bottom:1px solid #ccc;" v-for="item in list">{{item.name}}</div>
     
        </div>
    </div>
</template>

<script>
    const viewList={
        template:'#viewList',
        props:{
            list:{
              type:Array
             
            }
        }
    }
    Vue.component('viewList', viewList)
</script>
<!-- 网格视图 -->
<template id="gridView">
    <div >
        <div style="border:1px solid #ccc;height: 500px;">
        <div class="gridView" v-for="item in list">{{item.name}}</div>
        </div>
    </div>
</template>
<script>
    const gridView={
        template:'#gridView',
        props:{
            list:{
              type:Array
            }
        }
    }
    Vue.component('gridView', gridView)
</script>

    <div id='app'>
        <div style="width: 800px;">
            <control @change="viewChange"></control>
            <view-list :list="list" v-show="!flag"></view-list>
            <grid-view :list="list" v-show="flag"></grid-view>
        </div>
     
    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            list:[{
                name:"test1.txt"
            },{
                name:"test2.txt"
            },{
                name:"test3.txt"
            },{
                name:"test4.txt"
            },{
                name:"testtest5.txt"
            }],
            flag:true
        },
        methods:{
            viewChange(e){
                this.flag=e
            }
        }
    })
    </script>
</body>
</html>